<template>
	<view class="outer_box">
		<scroll-view class="scroll-view" scroll-y="true" :style="{height:height+'px'}">
			<!-- 添加地址 -->
			<addAddress qianjin>
				<!-- 添加收货地址 -->
				<view class="add-address-text" @tap='openAddAddress' v-if="activeType==1">请先添加一个收货地址</view>
				<!-- 收货地址 -->
				<view class="address-info" v-if="activeType==2" @tap='openAddAddress'>
					<view>{{address.name}} {{address.phone}}</view>
					<view>{{address.province}}{{address.city}}{{address.district}}{{address.address}}</view>
				</view>
			</addAddress>

			<view class="product-info-box" v-if="type==1">
				<shopTitle color='#666' :content="shopInfo.shopName"></shopTitle>
				<productInfo class="product-info"  :productInfo='goodInfo'>
					<view slot='sku' class="sku"></view>
					<view slot='price' class="price">￥{{goodInfo.price}}</view>
				</productInfo>
				<view class="price-freight">
					<view class="">商品金额</view>
					<view class="">￥{{(totalPrice/100).toFixed(2)}}</view>
				</view>
				<view class="price-freight">
					<view class="">运费</view>
					<view class="">￥0.00</view>
				</view>
				<view class="total-price">
					<text>合计:</text>
					<text>￥{{(totalPrice/100).toFixed(2)}}</text>
				</view>
			</view>
			<view class="product-info-box" v-if="type==2">
				
				<shopTitle color='#666' :content="cart.shopName"></shopTitle>
				<productInfo class="product-info" v-for="item in cart.data" :productInfo='item'>
					<view slot='sku' class="sku"></view>
					<view slot='price' class="price">￥{{item.goodsPrice}}</view>
					<text slot='number-btn' class="number">x{{item.number}}</text>
				</productInfo>
				<view class="price-freight">
					<view class="">商品金额</view>
					<view class="">￥{{totalPrice}}</view>
				</view>
				<view class="price-freight">
					<view class="">运费</view>
					<view class="">￥0.00</view>
				</view>
				<view class="total-price">
					<text>合计:</text>
					<text>￥{{(totalPrice/100).toFixed(2)}}</text>
				</view>
			</view>
			<!-- <view class="remark">
				<view class="">订单备注</view>
				<textarea type="text" value="" />
			</view> -->
		</scroll-view>
		<view class="pay-box">

			<view class="money">
				<view class="">共3件，</view>
				<view class="">合计：</view>
				<view class="">￥{{(totalPrice/100).toFixed(2)}}</view>
				<view class="" @tap='open()'>立即支付</view>
			</view>
		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥{{(totalPrice/100).toFixed(2)}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{(totalPrice/100).toFixed(2)}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='subOrder()'>
					支付
				</button>
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				orderNo:'',
				height: 500,
				productInfo: {
					title: '进口苹果',
					image: '/static/login/logo.png',
					sku: '1000g',
					price: '30'
				},
				totalPrice:'',
				ids:'',
				shopId:"",
				cartList:[],
				cart:'',
				goodsIds:[],
				activeType:1,
				address:"",
				shopInfo:'',
				goodInfo:'',
				type:''
			}
		},
		onLoad(parameter) {
			console.log(parameter.shopId)
			console.log(parameter.goodsIds)
			this.type = parameter.type
			// this.goodsIds = parameter.goodsIds
			if (parameter.shopId != undefined && parameter.shopId != ''&&this.type==1) {
				this.shopId = parameter.shopId
				this.goodsId = parameter.goodsIds
				// this.getCartList(parameter.shopId)
				this.getGoodsInfo()
				this.shopInf()
			}else if (parameter.shopId != undefined && parameter.shopId != '' && this.type==2) {
				this.shopId = parameter.shopId
				this.goodsId = parameter.goodsIds
				this.getCartList(parameter.shopId)
				// this.getGoodsInfo()
				// this.shopInf()
			}
			// let time = new Date();
			// this.dateTime = time.format('hh:mm') //显示当前时间
			// this.realiTime = time.format('yyyy-MM-dd hh:mm') //显示当前时间
			// console.log(this.dateTime)
			// //清除时间
			// this.delReserveTime()
		
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(120)

				}
			})
		},
		onShow() {
			this.getUserInfo()
			this.getAddressList()
			this.getOrderNo()
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			getOrderNo() {
				if (this.orderNo != '') {
					uni.showToast({
						title: "订单状态已经改变！",
						duration: 1000,
						icon: 'none',
					});
					setTimeout(function() {
						uni.switchTab({
							url: '../user/user'
						})
					}, 1200);
			
				}
			},
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			getAddressList() {
				let _this = this
				this.$api.getAddressList({}).then((res) => {
					if (res.data.code == 200) {
						_this.addressList = res.data.data
						if (_this.addressList.length > 0) {
							_this.address = _this.addressList[0]
							if (_this.address != '') {
								_this.activeType = 2
							}
						} else {
							_this.activeType = 1
						}
					}
				})
			},
			//订单支付
			subOrder() {
				
				if (this.activeType == 1) {
					uni.showToast({
						title: "还没有添加收货地址！",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				//选择支付方式弹框
				let type=3
				// if(this.current===0){
				// 	type=1
				// }
				// if(this.current===1){
				// 	type=2
				// }
				let parameter = {
					ids: JSON.parse(this.goodsId),
					isDispatching: 3,
					// takesTime: this.realiTime,
					// takesPhone: this.appointPhone,
					// isDispatching: this.activeType,
					addressId: this.address.id,
					orderType:1
			
				}
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.orderNo = res.data.data.orderNumber
						console.log("=----------------" + JSON.stringify(res.data.data))
						this.payOrder(parameter,type)
					}
				})
			
			},
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000
							});
							this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: 'paysuccess'
								});
							}, 1200);
			
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../member/toUp'
								});
			
							}, 1200);
						}
					}
				
				})
			},
			getGoodsInfo(){
				this.$api.getGoodsInfo({
					goodsId:JSON.parse(this.goodsId)[0]
				}).then((res) => {
					this.goodInfo = res.data.dataMap
					this.totalPrice = this.goodInfo.price*100
					console.log(res)
				})
			},
			shopInf(){
				this.$api.shopInfo({
					shopId:this.shopId
				}).then((res) => {
					this.shopInfo = res.data.data
					
					console.log(res)
				})
			},
			getCartList(shopId) {
				this.totalPrice = 0
				this.ids = []
				this.shopId = shopId
				this.$api.getCartList({
					shopId: this.shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.cartList = res.data.data
						if (this.cartList.length > 0) {
							this.cart = this.cartList[0]
							console.log(JSON.stringify(this.goodsIds))
							// if (this.goodsIds != undefined) {
							// 	debugger
							// 	let arr = this.cart.data
							// 	for (var i = 0; i < arr.length; i++) {
							// 		if (this.goodsIds.indexOf(arr[i].goodsId) < 0) {
							// 			delete arr[i]
							// 		}
							// 	}
							// 	let arr2 = arr.filter(n => n) //去除空元素
							// 	this.cart.data = arr2
							// }
							for (var i = 0; i < this.cart.data.length; i++) {
								this.totalPrice +=  Number(this.cart.data[i].goodsPrice)*Number(this.cart.data[i].number)*100
								this.ids.push(this.cart.data[i].goodsId)
							}
			
						} else {
							// uni.navigateTo({
							// 	url: './order?payState=2'
							// });
						}

					}
					
				})
			},
			openAddAddress() {
				uni.navigateTo({
					url: '../address/addressList'
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	/deep/ .product-box-module{
		margin-top: 20rpx;
	}
	.popup{
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.popup_pay{
			width: 750rpx;
			height: 300rpx;
			text-align: center;
			view:nth-child(1){
				margin-top: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
			view:nth-child(2){
				font-size: 56rpx;
				font-weight: 400;
				color: #FF8308;
			}
		}
		.item{
			margin-top: 30rpx;
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background: #EEEEEE;
			border-radius: 1rpx;
			margin-top: 30rpx;
		}
		.paymentBtn{
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	.outer_box {
		height: 100%;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;

		.add-address-text {
			margin-left: 10rpx;
		}

		.address-info {
			margin: 0 auto;
			width: 90%;

			view:nth-child(1) {
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
			}

			view:nth-child(2) {
				margin-top: 10rpx;
				font-weight: bold;
				color: #666666;
				font-size: 28rpx;
			}
		}

		.pay-box {
			display: flex;
			margin: 4rpx 0;
			height: 110rpx;
			width: 100%;
			box-shadow: 0px -1px 0px 0px #EEEEEE;
			border-bottom: 2rpx solid #EEEEEE;
			justify-content: flex-end;
			background-color: #fff;

			.money {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				view:nth-child(1) {
					font-weight: 400;
					color: #999999;
					font-size: 24rpx;
				}

				view:nth-child(2) {
					font-weight: 400;
					color: #999999;
					font-size: 24rpx;
				}

				view:nth-child(3) {
					font-weight: bold;
					color: #FF8308;
					font-size: 36rpx;
				}

				view:nth-child(4) {
					margin-left: 30rpx;
					color: #fff;
					height: 80rpx;
					width: 220rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				}
			}

		}



		.remark {
			margin: 0 auto;
			display: flex;
			margin-top: 20rpx;
			padding: 30rpx;
			width: 86%;
			min-height: 150rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			view:nth-child(1) {
				flex: 1;
			}

			textarea:nth-child(2) {
				flex: 4;
				height: 100rpx;
			}
		}

		.product-info-box {
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 30rpx;
			width: 86%;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.total-price {
				margin-top: 40rpx;
				text-align: end;
				font-size: 36rpx;
				font-weight: bold;

				text:nth-child(1) {
					color: #333333;

				}

				text:nth-child(2) {
					color: #FF8308;

				}
			}

			.price-freight {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				view:nth-child(1) {
					color: #666666;
				}

				view:nth-child(2) {
					color: #999999;
					font-weight: 400;
				}
			}

			.product-info {
				margin-top: 20rpx;

				.sku {
					color: #999999;
					font-size: 24rpx;
				}

				.price {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF8308;
				}

				.number {
					width: 100%;
					text-align: end;
					color: #333333;
					font-weight: bold;
				}
			}

			.shopTitle {}
		}


	}
</style>
